﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->

<!--
    This file illustrates how to design a page that tells users the value of the add-in and prompts them to start
    a free, trial version of the add-in.
    -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Welcome Screen - Trail Placemat</title>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">

    <!-- Template styles -->
    
    <link href="trial.placemat.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-l">
    <main class="ms-firstrun-trial">
        <section class="ms-firstrun-trial__header ms-bgColor-themePrimary">
            <div class="ms-firstrun-trial__logo">
                <img src="/assets/logo-filled.png" />
                <h1 class="ms-font-xl ms-fontWeight-light ms-fontColor-white">My Add-in Name</h1>
            </div>
            <div class="ms-firstrun-trial__title">
                <h2 class="ms-font-xl ms-fontWeight-light ms-fontColor-white">WELCOME</h2>
            </div>
            <div class="ms-firstrun-trial__subtitle ms-font-m ms-fontWeight-light ms-fontColor-white">
                <p>This add-in helps you be productive at work!</p>
            </div>
        </section>
        <section class="ms-firstrun-trial__content ms-bgColor-themePrimary">
            <div class="ms-font-m ms-fontColor-white ms-firstrun-trial__content--centered">
                <ul class="ms-firstrun-trial__list ms-fontWeight-regular">
                    <li><span><i class="ms-Icon enlarge ms-Icon--coffee"></i>Helps you produce fast</span></li>
                    <li><span><i class="ms-Icon enlarge ms-Icon--star"></i>Adds value to your work</span></li>
                    <li><span><i class="ms-Icon enlarge ms-Icon--glasses"></i>Enables you to be creative</span></li>
                </ul>
            </div>
            <button class="ms-firstrun-trial__action--primary ms-bgColor-themePrimary ms-Button ms-Button--command ms-fontColor-white ms-font-m">
                <span class="ms-Button-label ms-fontWeight-light">Start your <span class="ms-fontWeight-semibold">trial</span> to get all features!</span>
            </button>
        </section>
    </main>
</body>
</html>
